<template>
  <div class="activities-details">
    <section class="page-back">
      <router-link to="/events">活动赛事 ></router-link>
      <router-link to="/events/school">校园活动 ></router-link>
      <span>{{infoDetail.name}}</span>
    </section>
    <section class="details-container">
      <div class="title-img">
        <img src="../../../assets/images/events/banner1.png" alt="标题图片" />
      </div>
      <div class="activities-poster-part">
        <div class="poster-info">
          <div class="poster-info-title">
            <h2>{{infoDetail.name}}</h2>
            <!-- 此活动进行状态,对所有人显示  -->
            <span :class="'progress'+infoDetail.show_status_int">{{infoDetail.show_status_text}}</span>
          </div>
          <div class="poster-img">
            <img
              v-if="infoDetail.picture==''"
              src="../../../assets/images/events/bg-img.png"
              alt="封面图片"
            />
            <img v-else :src="BASE_URL+infoDetail.picture" :onerror="errorImg1" alt="封面图片" />
          </div>
          <div class="status-box">
            <!-- 活动审核状态,只对创建者显示 -->
            <i :class="'status'+infoDetail.status" v-if="userId==infoDetail.create_id"></i>
          </div>
        </div>
        <div
          class="reject-reson"
          v-if="infoDetail.reason!=''&&infoDetail.status=='3'"
        >拒绝理由：{{infoDetail.reason}}</div>
        <div class="common-title">
          <img class="tit-icon" src="../../../assets/images/events/base-info.png" alt="icon" />
          <i class="tit-name">基本信息</i>
        </div>

        <div class="details-info">
          <ul>
            <li>
              <span class="title-name">发起人：</span>
              <span>
                <img class="avatar-img" :src="BASE_URL+infoDetail.avatar_path" alt />
                <i class="creater-name">{{infoDetail.create_name}}</i>
              </span>
            </li>
            <li>
              <span class="title-name">活动类型：</span>
              <span>{{infoDetail.level_type==1?"校级活动":(infoDetail.level_type==2?"年级活动":"班级活动")}}</span>
            </li>
            <li v-if="infoDetail.level_type!=1">
              <span class="title-name">活动范围：</span>
              <span>{{infoDetail.all_org_name}}</span>
            </li>
            <li>
              <span class="title-name">活动对象：</span>
              <span>
                <i v-for="(item,index) of infoDetail.role_info" :key="index">{{item.name}}&nbsp;</i>
              </span>
            </li>
            <li>
              <span class="title-name">活动时间：</span>
              <span>{{infoDetail.start_time}} 至 {{infoDetail.end_time}}</span>
            </li>
          </ul>
          <ul>
            <li>
              <span class="title-name">活动地点：</span>
              <span>{{infoDetail.place}}</span>
            </li>
            <li>
              <span class="title-name">活动名额：</span>
              <span>
                <i class="right-area">{{infoDetail.quota}}人</i>
                <i>已有{{infoDetail.quota_used_count}}人报名</i>
              </span>
            </li>
            <li>
              <span class="title-name">活动组织方：</span>
              <span>{{infoDetail.organizer}}</span>
            </li>
            <li>
              <span class="title-name">活动联系人：</span>
              <span>{{infoDetail.responsibler}}</span>
            </li>
            <li>
              <span class="title-name">联系方式：</span>
              <span>{{infoDetail.telephone}}</span>
            </li>
          </ul>
        </div>
        <div class="common-title">
          <img class="tit-icon" src="../../../assets/images/events/info-icon.png" alt="icon" />
          <i class="tit-name">活动内容</i>
        </div>
        <template>
          <div class="no-profile" v-if="infoDetail.profile==''">
            <p>暂无内容</p>
          </div>
          <div v-else class="activity-information" v-html="infoDetail.profile"></div>
        </template>
        <!-- 在线报名的活动才显示报名信息这栏 -->
        <template v-if="infoDetail.online=='1'">
        <!--状态为已通过、进行中、报名中、已结束的时候，显示下面模块 -->
        <section
          v-if="infoDetail.show_status_int==2||infoDetail.show_status_int==4||infoDetail.show_status_int==5||infoDetail.show_status_int==6"
        >
          <div class="common-title registry-title clear">
            <img class="tit-icon" src="../../../assets/images/events/enroll.png" alt="icon" />
            <i class="tit-name">报名信息({{infoDetail.quota_used_count}}人)</i>
            <el-button class="check-btn fr" type="text" v-if="userId==infoDetail.create_id">
              <router-link :to="{path: '/events/registrationList', query: {id: infoDetail.id}}">查看名单</router-link>
            </el-button>

            <!-- 报名进行中 -->
            <template v-if="infoDetail.registration_status=='1'&&infoDetail.role_id.indexOf(userInfo.check_role)>-1&&joinFlag==true">
              <el-button
                v-if="infoDetail.checked_quota_status=='0'"
                class="registry-btn fr"
                type="primary"
                @click="registryVisible = true"
              >我要报名</el-button>
              <el-button v-if="infoDetail.checked_quota_status=='1'" class="fr" type="info">已报名</el-button>
              <el-button v-if="infoDetail.checked_quota_status=='2'" class="fr" type="success">报名成功</el-button>
              <el-button v-if="infoDetail.checked_quota_status=='3'" class="fr" type="info">报名失败</el-button>
            </template>
            <template v-else>
              <el-button type="info" class="fr" v-if="infoDetail.registration_status=='0'">未开始</el-button>
              <el-button type="info" class="fr" v-if="infoDetail.registration_status=='2'">报名截止</el-button>
            </template>

          </div>
          <div class="registry-part">
            <ul v-if="infoDetail.quota_used_count!=0">
              <template v-if="moreFlag">
                <li v-for="(item,index) of quotaData" :key="index">
                  <img
                    class="comers-pic"
                    :src="BASE_URL+item.avatar_path"
                    :onerror="errorImg"
                    alt="头像"
                  />
                  <span class="comers-name">{{item.user_name}}</span>
                </li>
              </template>
              <template v-else>
                <li v-for="(item,index) of allQuotaData" :key="index">
                  <img
                    class="comers-pic"
                    :src="BASE_URL+item.avatar_path"
                    :onerror="errorImg"
                    alt="头像"
                  />
                  <span class="comers-name">{{item.user_name}}</span>
                </li>
              </template>
              <div class="check-more-row" v-if="allQuotaData.length>9">
                <el-button class="check-more-btn" type="text" @click="lookMore">
                  查看更多
                  <i class="el-icon-arrow-up"></i>
                </el-button>
              </div>
            </ul>
            <div v-else class="no-data-tips tips3"></div>
          </div>
          <div class="common-title review-title clear">
            <img class="tit-icon" src="../../../assets/images/events/comment-icon.png" alt="icon" />
            <i class="tit-name">评论</i>
            <el-button class="write-btn fr" type="text" @click="showInput">
              <i class="el-icon-edit-outline"></i>
            </el-button>
          </div>
          <div class="review-part">
            <!-- 新增评论 -->
            <div class="discuss-area-content" v-show="reviewVisible">
              <div class="discuss-area-textarea">
                <el-input
                  type="textarea"
                  placeholder="请输入你的评论吧"
                  :rows="5"
                  resize="none"
                  v-model.trim="addContent"
                  maxlength="140"
                  show-word-limit
                ></el-input>
              </div>
              <div class="discuss-express-btns">
                <div class="btns-row">
                  <img
                    @click="emojiOFF(0)"
                    src="../../../../public/images/emojim.png"
                    class="emoji-icon"
                  />
                  <el-button type="primary" class="review-btn" @click="addReview">发表</el-button>
                </div>
                <vueEmoji class="vueEmoji" @select="selectEmoji" v-if="addEmoji"></vueEmoji>
              </div>
            </div>
            <div class="discuss-list-box">
              <template v-if="reviewList.length>0">
                <ul>
                  <li class="discuss-li" v-for="(item,index) of reviewList" :key="index">
                    <div class="user-pic">
                      <img :src="BASE_URL+item.avatar_path" :onerror="errorImg" alt="头像" />
                    </div>
                    <div class="discuss-content">
                      <div class="user-details">
                        <span class="user-info fl">
                          <i class="user-name">{{item.user_name}}</i>
                          <i class="review-time">{{item.create_time}}</i>
                        </span>
                        <span class="tools-btns fr" v-if="userId==item.user_id">
                          <i class="edit-btns" @click="editReview(item)"></i>
                          <i class="del-btns" @click="delReview(item.id)"></i>
                        </span>
                      </div>
                      <p
                        :class="userId==item.user_id?'content-words self-review':'content-words'"
                        v-html="emoji(item.content)"
                      ></p>
                    </div>
                    <!-- 编辑评论 -->
                    <div class="discuss-area-content" v-show="editId==item.id">
                      <div class="discuss-area-textarea">
                        <el-input
                          type="textarea"
                          placeholder="请输入你要编辑的内容"
                          :rows="5"
                          resize="none"
                          v-model.trim="editContent"
                          maxlength="140"
                          show-word-limit
                        ></el-input>
                      </div>
                      <div class="discuss-express-btns">
                        <div class="btns-row">
                          <img
                            @click="emojiOFF(1)"
                            src="../../../../public/images/emojim.png"
                            class="emoji-icon"
                          />
                          <el-button type="primary" class="review-btn" @click="sureEdit">编辑</el-button>
                        </div>
                        <vueEmoji class="vueEmoji" @select="selectEmoji" v-if="addEmoji"></vueEmoji>
                      </div>
                    </div>
                  </li>
                </ul>
                <div class="table-pageBox" v-if="total_number>page_size">
                  <el-pagination
                    background
                    @current-change="change_page"
                    :page-size="page_size"
                    :current-page="page_index"
                    layout="prev, pager, next"
                    :total="total_number"
                  ></el-pagination>
                </div>
              </template>
              <template v-else>
                <div class="no-data-tips tips6"></div>
              </template>
            </div>
          </div>
        </section>
        </template>

      </div>
    </section>
    <el-dialog class="registryDialog" title="报名" :visible.sync="registryVisible" width="650px">
      <el-form ref="registrationForm" label-width="175px" label-position="left">
        <el-form-item label="用户名:">{{userInfo.name}}</el-form-item>
        <el-form-item label="账号:">{{userInfo.number}}</el-form-item>
        <el-form-item label="学段年级班级:" v-if="userInfo.class">{{userInfo.class[0].org_tre_name}}</el-form-item>
        <el-form-item label="角色:">{{userInfo.check_role_name}}</el-form-item>
        <template>
          <div v-for="(item,inx) in registrationForm" :key="inx">
            <el-form-item :label="item.name+':'" required>
              <el-input v-model="item.value" maxlength="30"></el-input>
            </el-form-item>
          </div>
        </template>
      </el-form>
      <div class="form-footer-btns">
        <el-button @click="registryVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">报 名</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import vueEmoji from "../../common/emoji";
import { join } from 'path';
export default {
  components: {
    vueEmoji
  },
  data() {
    return {
      userInfo: this.$store.getters.userInfo,
      userId: this.$g.user_id,
      infoDetail: [], //当前活动的详情数据
      joinFlag:false,
      moreFlag: false,
      allQuotaData: [], //所有成功报名的人名单
      quotaData: [], //部分成功报名的人名单
      //封面图片加载不成功时的占位符
      errorImg1:
        'this.src="' +
        require("../../../assets/images/events/bg-img.png") +
        '"',
      //用户头像加载不成功时的占位符
      errorImg:
        'this.src="' +
        require("../../../../public/images/user_preview-1.png") +
        '"',
      registryVisible: false,
      registrationForm: [], //报名信息
      rules: {
        value: [
          { required: true, message: "请输入信息", trigger: ["blur", "change"] }
        ]
      },
      reviewVisible: false,
      addEmoji: false,
      emojiType: Number, //新增emoji:0;编辑emoji:1;
      addContent: "", //当前用户新增的评论
      reviewList: [], //评论列表数据
      // 评论列表分页：
      page_index: 1,
      page_size: 5,
      total_number: 0,
      // 编辑评论
      editEmoji: false,
      editId: "", //当前要编辑的评论id
      editContent: "" //评论框内的内容
    };
  },
  created() {
    this.getDetail();
  },
  mounted() {
  },
  computed: {

  },
  methods: {
    /**
     * 获取活动详情
     */
    getDetail() {
      let success = res => {
        this.infoDetail = res.data;
        this.checkjoinRole(res.data.org_id);//判断用户是否在活动允许的报名范围内（如学校、年级、班级这些条件是否符合）
      this.registrationForm = res.data.registration_information.filter(item=>{
          return item.name!="";
      })
        this.allQuotaData = res.data.quota_user_info;
        this.quotaData = res.data.quota_user_info.slice(0, 10);

        // 默认显示评论第一页，即前5条
        this.page_index = 1;
        this.total_number = res.data.comment.length;
        this.reviewList = res.data.comment.slice(0, 5);
      };
      const params = {
        id: this.$route.query.id
      };
      this.$ajax.get("api/competition/activity", {
        params,
        func: { success: success }
      });
    },
    // 判断用户是否在某组织架构下
        checkjoinRole(orgId){
        let success = res => {
         this.joinFlag=res.data=='yes'?true:false;
      };
      let fail = res => {
      };
      this.$ajax({
        url: "api/org/get_user_in_org",
        method: "get",
        params: {
          org_id: orgId,
          user_id: this.userId
        },
        func: {
          success: success,
          fail: fail
        }
      });
      },
    //查看更多
    lookMore() {
      this.moreFlag = !this.moreFlag;
    },
    // 报名提交
    submit() {
      let flag = this.registrationForm.some((item, inx) => {
        return item.value.replace(/\s/g, "") == "";
      });
      if (flag) {
        this.$message.error("请把项目报名信息填写完整~");
      } else {
        this.registrate();
      }
    },
    // 报名
    registrate() {
      let success = res => {
        this.$message.success(res.msg);
        this.getDetail();
        this.registryVisible = false;
      };
      let fail = res => {
        this.$message.error(res.msg);
        this.registryVisible = false;
      };
      this.$ajax({
        url: "api/competition/activity_user",
        method: "post",
        data: {
          id: this.$route.query.id,
          user_id: this.userId,
          information: this.registrationForm
        },
        func: {
          success: success,
          fail: fail
        }
      });
    },
    // 显示新增评论输入框
    showInput() {
      this.addContent = "";
      this.reviewVisible = !this.reviewVisible;
    },
    emojiOFF(type) {
      this.emojiType = type;
      type == 0
        ? (this.addEmoji = !this.addEmoji)
        : (this.editEmoji = !this.editEmoji);
    },
    // 选中表情
    selectEmoji(code) {
      if (this.emojiType == 0) {
        this.addEmoji = false;
        this.addContent += code;
      } else {
        this.editEmoji = false;
        this.editContent += code;
      }
    },
    //添加评论
    addReview() {
      let success = res => {
        this.reviewVisible = false;
        this.$message.success(res.msg);
        this.getDetail();
      };
      let fail = res => {};
      this.$ajax({
        url: "api/competition/activity_comment",
        method: "post",
        data: {
          id: this.$route.query.id,
          user_id: this.userId,
          content: this.addContent
        },
        func: {
          success: success,
          fail: fail
        }
      });
    },
    // 评论列表分页：
    change_page(val) {
      this.page_index = val;
      let currentVal = (val - 1) * this.page_size;
      this.reviewList = this.infoDetail.comment.slice(
        currentVal,
        currentVal + 5
      );
    },
    //编辑自己的评论
    editReview(item) {
      if (item.id === this.editId) {
        this.editId = null;
      } else {
        this.editContent = item.content;
        this.editId = item.id;
      }
    },
    //  确定编辑
    sureEdit() {
      let success = res => {
        this.editId = "";
        this.$message.success(res.msg);
        this.getDetail();
      };
      this.$ajax({
        url: "api/competition/activity_comment",
        method: "put",
        data: {
          id: this.editId,
          content: this.editContent
        },
        func: {
          success: success
        }
      });
    },
    //删除自己的评论
    delReview(id) {
      this.$confirm("确定删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "confirm-them"
      })
        .then(() => {
          this.sureDel(id);
        })
        .catch(() => {});
    },
    // 确定删除
    sureDel(id) {
      let success = res => {
        this.getDetail();
        this.$message.success("成功删除评论");
      };
      this.$ajax({
        url: "api/competition/activity_comment",
        method: "delete",
        params: {
          id: id
        },
        func: {
          success: success
        }
      });
    }
  }
};
</script>
<style lang="scss">
.activities-details {
  %ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .page-back {
    font-size: 14px;
    padding: 5px 0 25px;
    a:nth-child(1) {
      color: #333;
    }
    span {
      color: #3f3f3f;
    }
  }
  .details-container {
    background-color: #fff;
    .title-img {
      height: 120px;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .activities-poster-part {
      padding: 64px 100px;
      box-sizing: border-box;

      .poster-info {
        box-sizing: border-box;
        padding-right: 100px;
        position: relative;
        .poster-img {
          padding: 30px 0;
        }
      }
      .poster-info-title {
        h2 {
          display: inline-block;
          max-width: 80%;
          font-size: 24px;
          line-height: 29px;
          @extend %ellipsis;
          vertical-align: middle;
        }
        span {
          display: inline-block;
          width: 80px;
          height: 28px;
          text-align: center;
          line-height: 28px;
          border-radius: 14px;
          vertical-align: middle;
          margin-left: 20px;
        }
        .progress1,
        .progress2,
        .progress3,
        .progress4,
        .progress5,
        .progress6 {
          color: #fff;
        }
        .progress1 {
          background-color: #dc972e;
        }
        .progress2 {
          background-color: #3cc56d;
        }
        .progress3 {
          background-color: #cb3c6b;
        }
        .progress4 {
          background-color: #599fde;
        }
        .progress5 {
          background-color: #599fde;
        }
        .progress6sssss {
          background-color: #999;
        }
      }
      .status-box {
        position: absolute;
        right: 0;
        top: 0;
        .status1,
        .status2,
        .status3 {
          display: inline-block;
          width: 93px;
          height: 71px;
        }
        .status1 {
          background: url("../../../assets/images/events/pass-icon.png")
            no-repeat;
        }
        .status3 {
          background: url("../../../assets/images/events/reject-icon.png")
            no-repeat;
        }
        .status2 {
          background: url("../../../assets/images/events/review-icon.png")
            no-repeat;
        }
        .el-button {
          padding: 0;
          width: 160px;
          height: 48px;
        }
      }
    }

    .reject-reson {
      height: 36px;
      line-height: 36px;
      background-color: #fff8f0;
      font-size: 14px;
      color: #a94545;
      padding-left: 20px;
    }
  }
  .common-title {
    height: 36px;
    line-height: 36px;
    background-color: #f0f8ff;
    margin: 32px 0;
    font-size: 14px;

    .tit-icon {
      padding: 0 15px 0 20px;
    }
    .tit-icon,
    .tit-name {
      vertical-align: middle;
      font-style: normal;
    }
  }
  .details-info {
    font-size: 14px;
    i {
      font-style: normal;
    }
    li {
      padding: 10px 0;
      line-height: 16px;
      span:nth-child(2) {
        display: inline-block;
        width: calc(100% - 130px);
        @extend %ellipsis;
      }
    }
    .title-name {
      display: inline-block;
      width: 130px;
      font-size: 14px;
      color: #666;
      vertical-align: top;
    }
    .poster-img {
      display: inline-block;
      width: 390px;
      height: 180px;
    }
    .avatar-img {
      display: inline-block;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #ccc;
      margin-right: 10px;
    }
    .avatar-img,
    .creater-name {
      vertical-align: middle;
    }
    .right-area {
      margin-right: 20px;
    }
    ul {
      display: inline-block;
      width: 50%;
    }
  }

  .registry-title {
    img,
    i,
    .el-button {
      vertical-align: middle;
    }
    .check-btn {
      margin-right: 20px;
    }
    .el-button {
      padding: 4px 6px;
      margin: 6px 20px 0;
    }
    .el-button--text a {
      color: #409eff;
    }
  }
  .registry-part {
    // padding: 38px 0;
    li {
      display: inline-block;
      width: 60px;
      margin: 0 20px 30px;
      text-align: center;
      .comers-pic {
        border-radius: 50%;
      }
      .comers-name {
        display: block;
        font-size: 14px;
        color: #333;
        padding-top: 8px;
      }
    }
    .check-more-row {
      text-align: center;
      .check-more-btn:hover {
        .el-icon-arrow-up {
          transform: rotate(180deg);
          -webkit-transform: rotate(180deg);
          -moz-transform: rotate(180deg);
          -o-transform: rotate(180deg);
          -ms-transform: rotate(180deg);
        }
      }
      .el-icon-arrow-up {
        transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
      }
    }
  }

  .review-title {
    .write-btn {
      padding: 8px 0;
      margin-right: 20px;
      i {
        font-size: 20px;
      }
    }
  }
  .registryDialog {
      .el-dialog__body {
    padding: 30px 60px;
    }
    .form-footer-btns {
      text-align: center;
      .el-button {
        padding: 0;
        width: 68px;
        height: 30px;
      }
    }
  }
  .tips3 {
    height: 400px;
    background: url("../../../assets/images/events/pleaceholder (3).png")
      no-repeat center #fff;
  }
  .tips6 {
    height: 400px;
    background: url("../../../assets/images/events/pleaceholder (6).png")
      no-repeat center #fff;
  }
  /* ----------评论表情包 start */

  .emoji {
    width: 380px;
    height: 186px;
    bottom: 30px;
    background: #fff;
    z-index: 10;
    padding: 10px;
    margin-right: 10px;
  }

  .emoji .emoji-controller {
    height: 36px;
    overflow: hidden;
    margin-bottom: 0;
  }

  .emoji .emoji-controller li {
    float: left;
    width: 76px;
    font-size: 12px;
    line-height: 36px;
    cursor: pointer;
    text-align: center;
    position: relative;
    text-align-last: initial;
  }

  .emoji .emoji-controller li.active::after {
    content: "";
    width: 100%;
    height: 1px;
    background: #0689dd;
    left: 0;
    bottom: 4px;
    position: absolute;
  }

  .emoji .emoji-container {
    height: 140px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .emoji .emoji-container li {
    font-size: 0;
    padding: 5px;
  }

  .emoji .emoji-container li a {
    float: left;
    overflow: hidden;
    height: 35px;
    transition: all ease-out 0.2s;
    border-radius: 4px;
  }

  .emoji .emoji-container li a:hover {
    background-color: #d8d8d8;
    border-color: #d8d8d8;
  }

  .emoji .emoji-container li a span {
    width: 25px;
    height: 25px;
    display: inline-block;
    border: 1px solid transparent;
    cursor: pointer;
  }
  .discuss-express-btns {
    text-align: right;
    padding: 20px 0;
    .vueEmoji {
      display: inline-block;
      margin-right: 128px;
    }
    .btns-row {
      text-align: right;
    }
    .review-btn,
    .emoji-icon {
      vertical-align: middle;
    }
    .review-btn {
      padding: 0;
      width: 88px;
      height: 36px;
    }
    .emoji-icon {
      width: 25px;
      height: 25px;
      cursor: pointer;
      margin-right: 40px;
    }
  }
  .discuss-area-textarea {
    overflow: hidden;
  }
  .discuss-list-box {
    border-top: 1px solid #efefef;
    .discuss-li {
      position: relative;
      border-bottom: 1px solid #efefef;
      padding: 20px 0 25px 52px;
      &:hover {
        .tools-btns {
          display: block;
        }
      }
    }
    .user-pic {
      display: inline-block;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-top: 20px;
      overflow: hidden;
      position: absolute;
      left: 0;
      top: 0;
      img {
        object-fit: cover;
      }
    }
    .user-details {
      height: 40px;
    }
    .user-info {
      i {
        line-height: 20px;
      }
      .user-name {
        font-size: 14px;
        margin-right: 24px;
      }
      .review-time {
        color: #999;
      }
    }
    .tools-btns {
      display: none;
      i {
        display: inline-block;
        width: 20px;
        height: 18px;
        padding: 0 10px;
        cursor: pointer;
      }
      .edit-btns {
        background: url("../../../assets/images/events/edit-icon.png") no-repeat;
      }
      .del-btns {
        margin-left: 20px;
        background: url("../../../assets/images/events/del1.png") no-repeat;
      }
    }
    .discuss-area-content {
      margin-top: 20px;
    }
    .content-words {
      font-size: 14px;
      line-height: 16px;
    }
    .self-review {
      color: #4f6d80;
    }
  }
  .activity-information {
    font-size: 16px;
  }
  .no-profile p {
    padding: 40px 0;
    text-align: center;
    color: #666;
  }
}
</style>